<template>
	<div class="tabs">
		<el-tag 
		:effect="$route.name === tag.name ? 'dark':'plain'"
		:key="tag.name" v-for="(tag,index) in tags" :closable="tag.name !== 'home'" :disable-transitions="false" @close="handleClose(tag,index)" @click="changeMenu(tag)">
			{{tag.label}}

		</el-tag>
	</div>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
		
			};
		},
		methods: {
			//引入vuex中的方法
			...mapMutations({
				close:'closeTab'
			}),
			//删除tab标签
			handleClose(tag,index) {
			
				let lengths = this.tags.length - 1;
				this.close(tag);


				if(tag.name !== this.$route.name){
				return;
				}

				//向左跳转
				if(index == lengths){
				this.$router.push({
					name:this.tags[index-1].name
				})
				}else{//向右跳转
				this.$router.push({
					name:this.tags[index].name
				})
				}


			},
			changeMenu(item){
				this.$router.push({name:item.name})
				this.$store.commit('selectMenu',item)
			}
		},
		computed:{
			...mapState({
				tags:state => state.tab.tabsList
			})
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		padding: 20px;

		.el-tag {
			margin-right: 15px;
			cursor: pointer;
		}
	}
</style>
